import { createApp } from "vue";
//, defineAsyncComponent
import index_router from "./routers/IndexRouter";
import TheHeader from "./components/layout/TheHeader.vue";
import TheNav from "./components/layout/TheNav.vue";
import TheBorder from "./components/layout/TheBorder.vue";
import BlogCard from "./components/blogs/BlogCard.vue";
import CommentCard from "./components/blogs/CommentCard.vue";
import BaseButton from "./components/ui/BaseButton.vue";
import BasePage from "./components/layout/BasePage.vue";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import bootstrap from "bootstrap";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import App from "./App.vue";
import "./gobal.css";
import "lib-flexible";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(bootstrap);
app.use(index_router);
app.use(ElementPlus);
app.mount("#app");
app.component("the-header", TheHeader);
app.component("the-nav", TheNav);
app.component("the-border", TheBorder);
app.component("blog-card", BlogCard);
app.component("comment-card", CommentCard);
app.component("base-button", BaseButton);
app.component("base-page", BasePage);
